<template>
	<view class="page" :style="{ '--fss': app.theme.fss() }">
		<common-header v-if="scrollTop > 50" title="我的" fixed background="rgba(33,33,33,1)">
			<template #left><text></text></template>
		</common-header>
		<view class="filterBackground flex">
			<image src="https://file.shengmaapp.com/storage/aichat/20240526/1464eec9702c9f539410c844aa5503ed.jpg" mode="aspectFill" class="image"></image>
			<view class="black"></view>
		</view>
		<view class="pageMain">
			<status-bar></status-bar>
			<view class="headBtnFlex flex">
				<view class="item flex">
					<text class="iconfont icon-kefu" style="font-size: calc(44rpx * var(--fss));"></text>
					<text class="text">客服</text>
				</view>
				<view class="item flex" @tap="app.util.openUrl({ url: '/pages/user/set' })">
					<text class="iconfont icon-shezhi"></text>
				</view>
			</view>
			<view class="userInfo">
				<view class="avatarView flex">
					<image @tap="app.util.toLogin()" src="https://file.shengmaapp.com/storage/aichat/20240526/1464eec9702c9f539410c844aa5503ed.jpg" mode="aspectFill" class="image"></image>
					<view class="right flex">
						<view class="item flex">
							<text class="num ell">15</text>
							<text class="text ell">音乐生成</text>
						</view>
						<view class="item flex">
							<text class="num ell">1</text>
							<text class="text ell">创作中</text>
						</view>
						<view class="item flex">
							<text class="num ell">36</text>
							<text class="text ell">入驻(天)</text>
						</view>
					</view>
				</view>
				<view class="accountView">
					<view class="nickname ell" @tap="app.util.toLogin()">若非无梦💪</view>
					<view class="desc Line2" @tap="app.util.openUrl({ url: '/pages/user/set' })">快写点什么，让更多人了解你的音乐天赋吧！<text class="iconfont icon-icons_edit"></text></view>
					<view class="tar flex">
						<view class="item">账户ID: 100021</view>
						<view class="item">剩余试用: 2</view>
					</view>
					<view class="vipView flex" @tap="app.util.openUrl({ url: '/pages/user/vip' })">
						<view class="left flex">
							<image src="/static/img/bnx.webp" mode="widthFix" class="image"></image>
							<view class="vipDesc ell">VIP会员低至￥0.26/天</view>
						</view>
						<view class="right flex">
							<text class="text">立即开通</text>
							<text class="iconfont icon-right-1-copy"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="recordView">
				<view class="tabFlex flex">
					<view class="item" :class="recordTab.index === index ? 'activeItem' : ''" @tap="recordTab.index = index" v-for="(item, index) in recordTab.list">{{ item.name }}</view>
					<view class="active flex" :style="{ left: `calc((100% / ${recordTab.list.length}) * ${recordTab.index})`, width: `calc((100% / ${recordTab.list.length}))` }">
						<view></view>
					</view>
				</view>
				<scroll-view scroll-x class="scrollxView statusFlex" v-if="recordTab.index === 0">
					<view class="view">
						<view class="item active">🎵 全部</view>
						<view class="item">🏃 创作中</view>
						<view class="item">👌 已完成</view>
						<view class="item">😭 失败</view>
					</view>
				</scroll-view>
				<view class="recordGroup flex">
					<view class="item flex">
						<view class="imageView flex">
							<loading class="loading"></loading>
						</view>
						<view class="info">
							<view class="h3 ell">欢快的歌曲</view>
							<view class="desc ell">金发美女</view>
						</view>
						<view class="btnFlex flex">
							<view class="btnItem iconfont icon-gengduo" @tap="moreItemTap({})"></view>
						</view>
					</view>
					<view class="item flex">
						<view class="imageView flex">
							<image src="/static/img/imgError.png" mode="aspectFill" class="image"></image>
						</view>
						<view class="info">
							<view class="h3 ell">欢快的歌曲</view>
							<view class="desc ell">创作失败: 歌词中含有敏感词</view>
						</view>
						<view class="btnFlex flex">
							<view class="btnItem iconfont icon-gengduo" @tap="moreItemTap({})"></view>
						</view>
					</view>
					<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
						<view class="imageView flex">
							<image src="https://file.shengmaapp.com/storage/aichat/20240401/c45045ad649c15f6e98bef1fdf4a0def.jpg" mode="aspectFill" class="image"></image>
						</view>
						<view class="info">
							<view class="h3 ell">生日快乐</view>
							<view class="desc ell">1950s jazz scat</view>
						</view>
						<view class="btnFlex flex">
							<view class="btnItem iconfont icon-xiazai1"></view>
							<view class="btnItem iconfont icon-gengduo" @tap="moreItemTap({})"></view>
						</view>
					</view>
					<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
						<view class="imageView flex">
							<image src="https://file.shengmaapp.com/storage/aichat/20240522/d9c9baed501a80e5e5ad39f8e8b97b51.jpg" mode="aspectFill" class="image"></image>
						</view>
						<view class="info">
							<view class="h3 ell">SPAGHETTI</view>
							<view class="desc ell">Italian</view>
						</view>
						<view class="btnFlex flex">
							<view class="btnItem iconfont icon-xiazai1"></view>
							<view class="btnItem iconfont icon-gengduo" @tap="moreItemTap({})"></view>
						</view>
					</view>
					<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
						<view class="imageView flex">
							<image src="https://file.shengmaapp.com/storage/aichat/20240401/868c9b2103421668b2d7c89f12add164.jpg" mode="aspectFill" class="image"></image>
						</view>
						<view class="info">
							<view class="h3 ell">Wake（Like）</view>
							<view class="desc ell">Young & Free - Wake</view>
						</view>
						<view class="btnFlex flex">
							<view class="btnItem iconfont icon-xiazai1"></view>
							<view class="btnItem iconfont icon-gengduo" @tap="moreItemTap({})"></view>
						</view>
					</view>
					<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
						<view class="imageView flex">
							<image src="https://file.shengmaapp.com/storage/aichat/20240523/7920cd1a2b1fc6dcd1fc0432c1a04f8e.jpg" mode="aspectFill" class="image"></image>
						</view>
						<view class="info">
							<view class="h3 ell">想你，希望你一切都好</view>
							<view class="desc ell">U27479125</view>
						</view>
						<view class="btnFlex flex">
							<view class="btnItem iconfont icon-xiazai1"></view>
							<view class="btnItem iconfont icon-gengduo" @tap="moreItemTap({})"></view>
						</view>
					</view>
					<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
						<view class="imageView flex">
							<image src="https://file.shengmaapp.com/storage/aichat/20240523/fa02c35d76e4c65780fc75b45e3d0efe.jpg" mode="aspectFill" class="image"></image>
						</view>
						<view class="info">
							<view class="h3 ell">我是一个粉刷匠</view>
							<view class="desc ell">AI音乐研究生</view>
						</view>
						<view class="btnFlex flex">
							<view class="btnItem iconfont icon-xiazai1"></view>
							<view class="btnItem iconfont icon-gengduo" @tap="moreItemTap({})"></view>
						</view>
					</view>
				</view>
				<load-footer-text :load="1"></load-footer-text>
			</view>
		</view>
	</view>
	<common-bottom-popup ref="commonBottomPopupRef" />
</template>

<script setup>
	import { ref, onMounted, inject } from "vue";
	import { onShow, onPageScroll } from "@dcloudio/uni-app";
	const app = inject('app');
	
	/* 变量区域 */
	// 底部通用弹出层
	const commonBottomPopupRef = ref();
	
	// 滚动位置
	const scrollTop = ref(0);
	
	// 记录选项卡
	const recordTab = ref({
		index: 0,
		list: [
			{ name: "我创作的" },
			{ name: "喜欢" },
			{ name: "听过的" },
		]
	});
	
	/* 方法区域 */
	// 列表点击更多
	function moreItemTap(item){
		commonBottomPopupRef.value.open({ 
			blockList: [
				[
					{ name: '重命名', icon: '/static/img/rename_icon.png', key: 'rename' },
					{ name: '下载分享', icon: '/static/img/share_icon.png',key:'share' },
					{ name: '删除', color: '#ff4f23', icon: '/static/img/delete_icon.png', key: 'delete' },
				]
			],
			itemTap(res){
				console.log(res);
			}
		});
	}
	
	
	// 页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
</script>

<style lang="scss" scoped>
	.page{
		position: relative;
		.filterBackground{
			flex-direction: column;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			.image{
				width: 100%;
				height: 400rpx;
				filter: blur(130rpx);
			}
			.black{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0));
			}
		}
		.pageMain{
			position: relative;
			z-index: 2;
			.headBtnFlex{
				position: relative;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				height: 120rpx;
				padding: 20rpx $padding 0 $padding;
				.item{
					flex-direction: row;
					align-items: center;
					margin-left: 60rpx;
					.iconfont{
						font-size: calc(36rpx * var(--fss));
						color: rgba(255,255,255,0.7);
					}
					.text{
						font-size: calc(28rpx * var(--fss));
						color: rgba(255,255,255,0.9);
						margin-left: 10rpx;
					}
				}
			}
			.userInfo{
				background: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(0,0,0,0));
				border-radius: 30rpx 30rpx 0 0;
				border-top: 2rpx solid rgba(255,255,255,0.2);
				margin-top: 20rpx;
				.avatarView{
					flex-direction: row;
					align-items: center;
					padding: 0 0 0 36rpx;
					.image{
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
						border: 4rpx solid rgba(255,255,255,0.55);
						margin-top: -90rpx;
					}
					.right{
						flex-direction: row;
						align-items: center;
						flex: 1;
						width: 0;
						padding: 0 20rpx;
						.item{
							flex: 1;
							width: 0;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							padding: 26rpx 8rpx;
							.num{
								font-size: calc(30rpx * var(--fss));
								color: rgba(255,255,255,1);
								line-height: 1.2;
								font-weight: bold;
							}
							.text{
								font-size: calc(22rpx * var(--fss));
								color: rgba(255,255,255,0.55);
								line-height: 1.2;
								margin-top: 10rpx;
							}
						}
					}
				}
				.accountView{
					padding: 0 36rpx;
					margin-top: 25rpx;
					.nickname{
						color: #FFF;
						font-size: calc(32rpx * var(--fss));
						font-weight: bold;
						line-height: 1.2;
					}
					.desc{
						color: rgba(255,255,255,0.6);
						font-size: calc(24rpx * var(--fss));
						line-height: 1.35;
						margin-top: 20rpx;
						text{
							font-size: calc(20rpx * var(--fss));
						}
					}
					.tar{
						flex-direction: row;
						flex-wrap: wrap;
						margin-top: 26rpx;
						margin-bottom: -20rpx;
						.item{
							padding: 0 18rpx;
							color: rgba(255,255,255,0.75);
							background: rgba(255,255,255,0.06);
							margin-right: 13rpx;
							line-height: 1.8;
							border-radius: 6rpx;
							font-size: calc(20rpx * var(--fss));
							margin-bottom: 20rpx;
						}
					}
					.vipView{
						background: url("/static/img/tiBg.png") no-repeat center top;
						background-size: 150%;
						height: 120rpx;
						margin-top: 50rpx;
						padding: 0 20rpx 0 30rpx;
						border-radius: 10rpx;
						flex-direction: row;
						align-items: center;
						transition: 0.2s all;
						&:active{
							opacity: 0.8;
						}
						.left{
							flex: 1;
							width: 0;
							margin-right: 22rpx;
							flex-direction: row;
							align-items: center;
							.image{
								width: 70rpx;
							}
							.vipDesc{
								flex: 1;
								width: 0;
								color: #67491e;
								font-size: calc(26rpx * var(--fss));
								margin-left: 20rpx;
							}
						}
						.right{
							flex-direction: row;
							align-items: center;
							line-height: 60rpx;
							border-radius: 100rpx;
							color: #634211;
							.text{
								font-size: calc(26rpx * var(--fss));
								font-weight: bold;
							}
							.iconfont{
								font-size: calc(24rpx * var(--fss));
								margin-left: 5rpx;
								opacity: 0.8;
							}
						}
					}
				}
			}
			.recordView{
				margin: 20rpx 0 0 0;
				.tabFlex{
					align-items: center;
					flex-direction: row;
					margin: 0 35rpx;
					border-bottom: 2rpx solid rgba(255,255,255,0.032);
					position: relative;
					.item{
						text-align: center;
						width: 0;
						flex: 1;
						font-size: calc(26rpx * var(--fss));
						color: rgba(255,255,255,0.65);
						transition: 0.2s all;
						line-height: 80rpx;
						&:active{
							opacity: 0.8;
						}
						&.activeItem{
							color: rgba(255,255,255,0.9);
							font-weight: bold;
							font-size: calc(28rpx * var(--fss));
						}
					}
					.active{
						position: absolute;
						bottom: 0;
						height: 2rpx;
						transition: 0.2s all;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						view{
							border-radius: 10rpx;
							background: rgba(255,255,255,1);
							width: 20%;
							height: 100%;
						}
					}
				}
				.statusFlex{
					padding: 30rpx 0 0 0;
					.item{
						font-size: calc(26rpx * var(--fss));
						color: rgba(255,255,255,0.75);
						line-height: 55rpx;
						margin-right: 20rpx;
						padding: 0 25rpx;
						border-radius: 20rpx;
						background: rgba(255,255,255,0.025);
						transition: 0.2s all;
						&.active{
							background: rgba(255,255,255,0.07);
							color: #FFF;
							font-weight: bold;
						}
						&:nth-child(1){
							margin-left: 20rpx;
						}
					}
				}
				.recordGroup{
					flex-direction: column;
					margin-top: 35rpx;
					.item{
						padding: 0 18rpx 0 26rpx;
						margin-bottom: 40rpx;
						flex-direction: row;
						align-items: center;
						transition: 0.2s all;
						&:active{
							opacity: 0.8;
						}
						&:nth-last-child(1){
							margin-bottom: 0;
						}
						.imageView{
							width: 96rpx;
							height: 96rpx;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							background: rgba(255,255,255,0.06);
							border-radius: 15rpx;
							.image{
								width: 100%;
								height: 100%;
								border-radius: 15rpx;
								display: block;
							}
							.loading{
								transform: scale(0.5);
							}
						}
						.info{
							margin: 0 25rpx;
							flex: 1;
							width: 0;
							.h3{
								font-size: calc(26rpx * var(--fss));
								line-height: 1.2;
								color: rgba(255,255,255,0.9);
							}
							.desc{
								font-size: calc(22rpx * var(--fss));
								line-height: 1.2;
								color: rgba(255,255,255,0.6);
								margin-top: 8rpx;
							}
						}
						.btnFlex{
							flex-direction: row;
							align-items: center;
							.btnItem{
								font-size: calc(31rpx * var(--fss));
								color: rgba(255,255,255,0.45);
								margin-left: 20rpx;
								width: 44rpx;
								line-height: 60rpx;
								text-align: center;
								&:nth-child(2){
									color: rgba(255,255,255,0.65);
								}
							}
						}
					}
				}
			}
		}
	}
</style>